/* Box Menu - Copyright Paweł Kaczmarek 2025 */

body
{
	background-color: #fafbff;
}

.bottom
{
	display: inline-block;
	width: 100%;
	background-color: grey;
}

.container-box-menu
{
	
}

.box-menu
{
	display: inline-block;
	position: relative;
  box-sizing: border-box;
  width: unset;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	font-size: 0px;
	box-shadow: 1px 3px 5px #919191;
}

.box-menu ul
{
	min-width: max-content;
	max-width: 220px;
}

.box-menu > li > ul
{
  width: 100%;
}

.box-menu a
{
	display: block;
	position: relative;
	padding: 15px;
	font-size: 16px;
	background-color: white;
}

.box-menu a:link
{
	text-decoration: none;
}

.box-menu a:link,
.box-menu a:visited,
.box-menu a:active
{
	color: black;
}

.box-menu a:focus,
.box-menu a:focus-visible
{
	outline-offset: -4px;
	z-index: 102;
}

.box-menu a:hover
{
	background-color: #fbfbfb;
}

.box-menu > li:first-child
{
	border-left: 1px solid #d9d8d8;
}

.box-menu li
{
	position: relative;
	box-sizing: border-box;
}

.box-menu > li
{
	display: inline-block;
	vertical-align: middle;
	width: max-content;
}

.box-menu > li > a
{
  border-left: 1px solid #b3b3b3;
	border-right: 1px solid #d9d8d8;
	border-bottom: 1px solid #d9d8d8;
	border-top: 1px solid #d9d8d8;
	white-space: nowrap;
}

.box-menu > li ul
{
	display: none;
	padding: 0px;
	margin: 0px;
	box-shadow: 14px 14px 14px 1px #bbbbbb;
}

.nl-menu
{
  position: absolute;
	display: block !important;
}

.box-menu li > a.bm-nl::before
{
	position: absolute;
	width: 15px;
	height: 15px;
	bottom: 0px;
	right: 0px;
  content: "\23FA";
  line-height: 15px;
  text-align: center;
	font-size: 3px;

}

.box-menu li:has(> :focus) ul
{
	z-index: 100;
}

.box-menu > li ul.nl-menu,
.box-menu > li ul:hover
{
	box-shadow: 4px 4px 4px 0px #8c8a8a;
}

@media (hover: hover) 
{
	.box-menu:not(.bm-vertical-mode) li:hover > ul
	{
		position: absolute;
		display: block;
		z-index: 101;
	}
}

.box-menu > li > ul li
{
	position: relative;
}

.box-menu > li > ul > li a
{
	border-bottom: 1px solid #d9d8d8;
	border-right: 1px solid #d9d8d8;
	border-left: 1px solid #d9d8d8;
}

.box-menu > li > ul > li ul
{
	position: absolute;
  left: calc(100% - 1px);
	top: 0%;
}

.box-menu > li > ul li:hover > ul:not(.nl-menu) li:first-child > a:before
{
	position: absolute;
	left: -5px;
	content: "\21E8";
	font-size: 12px;
	z-index: 100;
}

.box-menu > li > ul > li > ul.nl-menu li:first-child > a:before
{
	position: absolute;
	left: -5px;
	content: "\21D2";
	font-size: 12px;
  color: #a8a8a8;
}

.box-menu .bm-vm-sm
{
	position: relative !important;
	width: calc(100% - 5px);
	max-width: unset;
	left: 5px !important;
}

.box-menu .bm-le
{
  display: block;
	width: 100%;
}

.box-menu.bm-vertical-mode
{
  width: 100%;
  background-color: #eee;
}

.box-menu.bm-vertical-mode > .bm-vm-button-box
{
  padding: 3px;
  border: 0px;
  background-color: white;
}

.box-menu:not(.bm-vertical-mode) > .bm-vm-button-box
{
	display: none;
}

.box-menu.bm-vertical-mode.bm-vertical-mode-hide-menu > li:not(:first-child)
{
	display: none;
}

.box-menu.bm-vertical-mode > li.bm-vm-button-box > a.bm-vm-button
{
	width: 20px;
  height: 20px;
  padding: 10px;
  border: 0px;
  background-image: linear-gradient(black 0%, black 20%, white 20%, white 40%, black 40%, black 60%, white 60%, white 80%, black 80%, black 100%);
}












/*
@media only screen and (max-width: 800px)
{
	
}
*/